<%@ page language="java" import="org.nus.*,java.util.*"
	pageEncoding="ISO-8859-1"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<jsp:include page="validate.jsp"></jsp:include>
	<head>
		<title>GPS Application</title>
		<link rel="stylesheet" type="text/css" href="CSS/divs.css">

		<script
			src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
			type="text/javascript"></script>
		<script src="js/markermanager.js"></script>

		<script type="text/javascript">
  	var map;
  	var mgr;
	function initialize(lat, lng) {
		
		if (GBrowserIsCompatible()) {
        	map = new GMap2(document.getElementById("map_canvas"));
			var point = new GLatLng(lat, lng);
        	map.setCenter(point, 12);
        	map.setUIToDefault();
			map.setMapType(G_NORMAL_MAP);
			var marker = new GMarker(point);
 			map.addOverlay(marker);
 			map.addControl(new GLargeMapControl());
    		map.addControl(new GScaleControl());
   	 		map.addControl(new GMapTypeControl());
			GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml('<h3>Location</h3>' + lat +'<br/>'+ lng);});
	}
}
	
	function showTrack(itemlist){
		mgr = new MarkerManager(map);
		mgr.addMarkers(getMarkers(itemlist), 6);
		mgr.refresh();
		//alert("success");
	}
	function getMarkers(itemlist) {
      var batch = [];
      for (var i=0;i<itemlist.length;i++) {
      	var latlng = itemlist[i];
      	var temp = new Array();
      	temp = latlng.split(',');
      	//alert(temp[0]+' and ' +temp[1]);
      	var marker = new GMarker(new GLatLng(temp[0]*1, temp[1]*1));
      	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml('<h3>Location</h3>' + latlng);});
      	batch.push(marker);
      }
      return batch;
    }
	function test(itemlist){
		var temp ="";
		for (i=0;i<itemlist.length;i++){
			temp += itemlist[i]+",";
		}
		alert(temp);
	}
    
    </script>
	</head>

	<body onload="initialize(1.292801,103.851657)">
		<div id="row1">
			<center>
				<img src="images/gpsbanner.jpg" alt="" name="Banner" width="950"
					height="100" id="Banner" />
			</center>
		</div>
		<div id="main">
			<div id="Content">
				<h1>
					Map View
				</h1>
				<!-- This div is google map display. -->
				<div id="map_canvas"></div>
				<div id="data_area">
					<%
						//set up imei menu if not exist
						if (session.getAttribute("imeimenu") == null) {
							DBDisplayer dp = (DBDisplayer) session.getAttribute("dbconn");
							String imeimenu = dp.getImeiList();
							session.setAttribute("imeimenu", imeimenu);
						}

						//Display data if certain imei has been selected
						String imei = request.getParameter("imei");
						if (imei == null) {
							imei = (String) session.getAttribute("this_imei");
						}
						if (imei != null) {
							session.setAttribute("this_imei", imei);
							DBDisplayer displayer = (DBDisplayer) session
							.getAttribute("dbconn");
							displayer.setImei(imei);
							String exportForm = displayer.getSubmitDatesForm();
							out
							.print("<p><font color='red'>Format: yyyy-mm-dd hh:mm:ss. Please make sure start date is less than end date.</font></p>");
							out.print(exportForm);
							String dataBetweenTime = (String) session
							.getAttribute("data_between_time");
							if (dataBetweenTime != null) {
					%>
					<table width="200" border="0" align="center">
						<tbody>
							<tr>
								<td>
									&nbsp;
									<form method="post" action="export.do" name="exportForm">
										<input type="submit" value="Export Data" name="exportButton">
									</form>
								</td>
								<td>
									&nbsp;
									<%
												List<String[]> locList = (List<String[]>) session
												.getAttribute("trackData");
												if (locList != null) {
									%>
									<script type="text/javascript">
									 	var locations = new Array();
									 	var index=0;
									 </script>
									<%
												for (int i = 0; i < locList.size(); i++) {
												String[] temp = locList.get(i);
									%>
									<script type="text/javascript">
										locations[index++] =""+	<%=temp[0]%>+","+<%=temp[1]%>;
									 </script>
									<%
									}
									%>
									<input type="submit" value="Show Track" name="showTrackButton"
										onclick="showTrack(locations);">
									<%
									}
									%>
								</td>
							</tr>
						</tbody>
					</table>


					<%
							out.print(dataBetweenTime);
							} else {
								out.print(displayer.getSpecificList(imei));
							}
					%>

					<%
					} else {
					%>
					Please click on one of the IMEI number on your right to view its
					gps information.
					<%
					}
					%>

				</div>
			</div>
			<!-- Menu goes here -->
			<div id="Menu">
				<a href="viewall.jsp" title="List all data">Home</a>
				<br />
				<a href="#" title="Show data on map">Map View</a>
				<br />
				<a href="adduser.jsp" title="Show/add users">Show/Add User</a>
				<br />
				<a href="contact.html" title="Contact us">Contact</a>
				<br />
				<a href="logout.do" title="Log Out">Log out</a>
			</div>

			<!-- Show imei list from database here -->
			<div id="imeilist">
				<%=session.getAttribute("imeimenu")%>
			</div>

		</div>
	</body>
</html>
